<template>
  <div class="det-wra">
    <div class="content-wra">
      <div class="back-btn" @click="backBtn()">
        <Icon type="ios-arrow-back" />Back
      </div>
      <div class="search-form">
        <div class="form-list">
          <div class="label-text">User Name：</div>
          <Input v-model="form.userName" placeholder="Name" class="input-sty" />
        </div>
        <div class="form-list">
          <div class="label-text">Payment Type:</div>
          <Select v-model="form.paymentType" class="select-sty" placeholder="Select" clearable>
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </div>
        <div class="form-list">
          <div class="label-text">Bonus Status:</div>
          <Select v-model="form.bonusStatus" class="select-sty" placeholder="Select" clearable>
            <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </div>
        <div class="form-list">
          <div class="label-text">Paid Time:</div>
          <DatePicker v-model="dateTime" @on-change="changeDate" format="yyyy/MM/dd" clearable type="daterange"
            placement="bottom-end" placeholder="Select date" class="date-sty"></DatePicker>
        </div>
        <div class="handle-btn">
          <div class="search-btn" @click="searchBtn()">Search</div>
          <div class="reset-btn" @click="resetBtn()">Reset</div>
        </div>
      </div>
      <div class="table-head">
        <Row>
          <Col span="3">
          <div class="table-name">User Name</div>
          </Col>
          <Col span="4">
          <div class="table-name">Payment Type</div>
          </Col>
          <!-- <Col span="3">
          <div class="table-name">Payment Amount</div>
          </Col>
          <Col span="2">
          <div class="table-name">Bonus Rate</div>
          </Col> -->
          <Col span="3">
          <div class="table-name">Unsettled Bonus</div>
          </Col>
          <Col span="3">
          <div class="table-name">Settled Bonus</div>
          </Col>
          <Col span="3">
          <div class="table-name">Bonus Status</div>
          </Col>
          <Col span="4">
          <div class="table-name">
            <div class="table-text">
              Paid Time
              <img src="../images/sort.png" v-if="paySort === 0" @click="sortPaiMet(1)" class="sort-icon" alt="">
              <img src="../images/sort_top.png" v-if="paySort === 1" @click="sortPaiMet(2)" class="sort-icon" alt="">
              <img src="../images/sort_bot.png" v-if="paySort === 2" @click="sortPaiMet(0)" class="sort-icon" alt="">
            </div>
          </div>
          </Col>
          <Col span="4">
          <div class="table-name">
            <div class="table-text">
              Signed Time
              <img src="../images/sort.png" v-if="signSort === 0" @click="sortSigMet(1)" class="sort-icon" alt="">
              <img src="../images/sort_top.png" v-if="signSort === 1" @click="sortSigMet(2)" class="sort-icon" alt="">
              <img src="../images/sort_bot.png" v-if="signSort === 2" @click="sortSigMet(0)" class="sort-icon" alt="">
            </div>
          </div>
          </Col>
        </Row>
      </div>
      <div class="table-body" @scroll="handleScroll" v-show="flatInviteDetArr">
        <div class="table-list" v-for="(item, index) in flatInviteDetArr" :key="index">
          <div class="list-sty" :style="{ opacity: item.bonusStatus == 'Cancelled' ? 0.3 : 1 }">
            <Row>
              <Col span="3">
              <div class="table-name">{{ item.userName }}</div>
              </Col>
              <Col span="4">
              <div class="table-name">{{ item.paymentType }}</div>
              </Col>
              <!-- <Col span="3">
              <div class="table-name">{{ userCurrency.currencySymbol }} {{ item.paymentAmount }}</div>
              </Col>
              <Col span="2">
              <div class="table-name">{{ item.bonusRate }}%</div>
              </Col> -->
              <Col span="3">
              <div class="table-name">{{ item.unsettledBonus ? `${userCurrency.currencySymbol} ${item.unsettledBonus}`
                : '-' }}</div>
              </Col>
              <Col span="3">
              <div class="table-name sep-text">{{ item.settledBonus ? `${userCurrency.currencySymbol}
                ${item.settledBonus}` : '-' }}
              </div>
              </Col>
              <Col span="3">
              <div class="table-name">{{ item.bonusStatus }}</div>
              </Col>
              <Col span="4">
              <div class="table-name">{{ item.paidTime }}</div>
              </Col>
              <Col span="4">
              <div class="table-name">{{ item.signedTime ? item.signedTime : '-' }}</div>
              </Col>
            </Row>
          </div>
        </div>
        <div class="load-text" v-show="showLoad && hasMore">
          <Icon type="ios-loading" />&nbsp;&nbsp; Loading data...
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import bigNumberUnit from "@/common/big-number-unit";
import { pageInvitePerformanceDetail } from "@/api/activity";
export default {
  data() {
    return {
      form: {
        pageNo: 1,
        pageSize: 10,
        paymentType: '',
        bonusStatus: ''
      },
      typeList: [
        {
          value: 'Order',
          label: 'Order Payment'
        },
        {
          value: 'shipping',
          label: 'Shipping Payment'
        },
      ],
      statusList: [
        {
          value: 0,
          label: 'Unsigned'
        },
        {
          value: 1,
          label: 'Signed'
        },
        {
          value: 2,
          label: 'Cancelled'
        }
      ],
      dateTime: '',
      inviteDetArr: [],
      isLoading: false, // 加载标志位
      hasMore: true, // 是否还有更多数据
      scrollContainer: null, // 滚动容器的引用
      showLoad: false,
      paySort: 0,
      signSort: 0,
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
    }),
    // 扁平化 inviteDetArr 数组，方便在模板中渲染
    flatInviteDetArr() {
      return [].concat(...this.inviteDetArr);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.scrollContainer = this.$el.querySelector('.table-body');
      this.getInvDet();
    });
  },
  created() { },
  methods: {
    // 用不到
    calculateNum(num) {
      return bigNumberUnit(num);
    },
    backBtn() {
      this.$router.push('/com-share');
    },
    searchBtn() {
      this.inviteDetArr = []; // 清空已有数据
      this.form.pageNo = 1;
      this.form.pageSize = 10;
      this.hasMore = true; // 重置是否还有更多数据的标志
      this.getInvDet();
    },
    resetBtn() {
      this.inviteDetArr = []; // 清空已有数据
      this.form.pageNo = 1;
      this.form.pageSize = 10;
      this.form.userName = '';
      this.form.paymentType = '';
      this.form.bonusStatus = '';
      this.dateTime = '';
      this.form.paidTimeStart = '';
      this.form.paidTimeEnd = '';
      this.hasMore = true; // 重置是否还有更多数据的标志
      this.getInvDet();
    },
    // 分页查询邀请表现详情列表
    getInvDet() {
      if (this.isLoading || !this.hasMore) return;
      this.isLoading = true;
      if (this.scrollContainer) {
        const oldScrollTop = this.scrollContainer.scrollTop; // 记录加载前滚动条距离顶部的距离
        const oldScrollHeight = this.scrollContainer.scrollHeight; // 记录加载前的滚动高度
        pageInvitePerformanceDetail(this.form).then((res) => {
          if (res.result.records.length > 0) {
            this.showLoad = false;//是否显示加载
            // 过滤掉 res.result.records 中已经存在于 this.inviteDetArr 的数据
            const newData = res.result.records.filter(newItem => {
              return !this.inviteDetArr.some(oldItem => oldItem.id === newItem.id);
            });
            this.inviteDetArr = this.inviteDetArr.concat(newData);
            this.form.pageNo++; // 增加页码
            // 计算加载新数据后滚动条需要调整的位置
            if (this.scrollContainer) {
              const newScrollHeight = this.scrollContainer.scrollHeight;
              const scrollHeightDifference = newScrollHeight - oldScrollHeight;
              this.scrollContainer.scrollTop = oldScrollTop + scrollHeightDifference;
            }
          } else {
            this.hasMore = false; // 没有更多数据了
            this.showLoad = false;//是否显示加载
          }
          this.isLoading = false;
        }).catch(() => {
          this.showLoad = false;//是否显示加载
          this.isLoading = false;
        });
      }
    },
    changeDate(val) {
      this.form.paidTimeStart = val[0];
      this.form.paidTimeEnd = val[1];
    },
    handleScroll(event) {
      this.showLoad = true;
      const { scrollTop, scrollHeight, clientHeight } = event.target;
      if (scrollTop + clientHeight >= scrollHeight - 20 && !this.isLoading && this.hasMore) {
        setTimeout(() => {
          this.getInvDet();
        }, 1000)
      }
    },
    sortPaiMet(val) {
      this.signSort = 0;
      this.paySort = val;
      this.inviteDetArr = []; // 清空已有数据
      this.form.pageNo = 1;
      this.form.pageSize = 10;
      this.hasMore = true; // 重置是否还有更多数据的标志
      if (val === 0) {
        delete this.form.orderBy;
        delete this.form.sort;
        this.getInvDet();
      } else if (val === 1) {
        this.form.orderBy = 1;
        this.form.sort = 1;//正序
        this.getInvDet();
      } else if (val === 2) {
        this.form.orderBy = 1;
        this.form.sort = 2;//正序
        this.getInvDet();
      }
    },
    sortSigMet(val) {
      this.paySort = 0;
      this.signSort = val;
      this.inviteDetArr = []; // 清空已有数据
      this.form.pageNo = 1;
      this.form.pageSize = 10;
      this.hasMore = true; // 重置是否还有更多数据的标志
      if (val === 0) {
        delete this.form.orderBy;
        delete this.form.sort;
        this.getInvDet();
      } else if (val === 1) {
        this.form.orderBy = 2;
        this.form.sort = 1;//正序
        this.getInvDet();
      } else if (val === 2) {
        this.form.orderBy = 2;
        this.form.sort = 2;//正序
        this.getInvDet();
      }
    }
  }
}
</script>
<style lang="less" scoped>
.det-wra {
  min-height: 100vh;
  height: 100%;
  padding-top: 67px;
  padding-left: 100px;
  padding-right: 100px;
  background: #F5F5F7;

  .content-wra {
    min-height: calc(100vh - 67px);
    padding: 32px;
    background: #FFFFFF;
    border-radius: 16px 16px 0 0;

    .back-btn {
      padding: 6px 16px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #E9EAF3;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #767B93;
      line-height: 19px;
      display: inline-block;
      cursor: pointer;
    }

    .search-form {
      display: flex;
      align-items: center;
      gap: 32px;
      margin-top: 24px;
      margin-bottom: 32px;

      .form-list {
        display: flex;
        align-items: center;
        gap: 12px;

        .label-text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #1E1714;
          line-height: 24px;
          text-wrap: nowrap;
        }

        .input-sty {
          width: 188px;

          :deep(.ivu-input) {
            height: 46px;
            padding: 12px 16px;
            font-weight: 500;
            font-size: 16px;
            line-height: 19px;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #E9EAF3;
          }
        }

        .select-sty {
          width: 188px;

          :deep(.ivu-select-selection) {
            height: 46px;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #E9EAF3;

            .ivu-select-placeholder {
              padding-left: 16px;
              font-size: 16px;
              font-weight: 500;
              line-height: 46px;
            }

            .ivu-select-selected-value {
              line-height: 46px;
            }
          }

          :deep(.ivu-select-item) {
            padding: 12px 14px;
            font-weight: 500;
            font-size: 16px;
            color: #333333;
          }

          :deep(.ivu-select-item:hover) {
            padding: 12px 14px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            background: #FF186B;
          }
        }

        .date-sty {
          width: 242px;

          :deep(.ivu-icon-ios-calendar-outline) {
            display: none;
          }

          :deep(.ivu-input) {
            height: 46px;
            padding: 12px 16px;
            font-weight: 500;
            font-size: 16px;
            line-height: 19px;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #E9EAF3;
          }
        }
      }

      .handle-btn {
        display: flex;
        align-items: center;
        gap: 20px;

        .search-btn {
          padding: 11px 20px;
          background: #FF186B;
          border-radius: 6px 6px 6px 6px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #FFFFFF;
          line-height: 21px;
          cursor: pointer;
        }

        .reset-btn {
          padding: 11px 20px;
          background: #AEB0B9;
          border-radius: 6px 6px 6px 6px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 18px;
          color: #FFFFFF;
          line-height: 21px;
          cursor: pointer;
        }
      }
    }

    .table-head {
      background: #F7F9FC;
      border-radius: 8px 8px 8px 8px;

      .table-name {
        padding: 23px 0 17px 0;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 18px;
        color: #1E1714;
        line-height: 21px;
        text-align: center;

        .table-text {
          display: flex;
          align-items: center;
          justify-content: center;

          .sort-icon {
            width: 16px;
            height: 16px;
            cursor: pointer;
            margin-left: 4px;
          }
        }
      }
    }

    .table-body {
      height: calc(100vh - 320px);
      overflow: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;

      .table-list {
        border-bottom: 1px solid #E9EAF3;

        .list-sty {
          .table-name {
            padding: 32px 0;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #1E1714;
            line-height: 19px;
            text-align: center;
          }

          .sep-text {
            color: #FF186B;
          }
        }
      }

      .load-text {
        font-weight: 500;
        font-size: 20px;
        color: #FF186B;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
        margin-top: 10px;
      }
    }

    .table-body::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>